<template>
  <el-row class="drawerCont">
    <commonDrawer
            :title="type==='edit'?'编辑模板':'新增模板'"
            :drawer="drawer"
            @closeDraw="openOrCloseDraw"
            @cancelFun="handleCancel"
            @save="handleConfirm">
      <template slot="column">
        <el-form
                class="m7-form drawerForm"
                size="mini"
                ref="activePostForm"
                :model="activePostForm"
                :rules="rules"
                label-position="top">
          <el-form-item label="模板名称" prop="name">
            <el-input v-model="activePostForm.name" style="width: 100%;" size="mini" placeholder="请输入模板名称" clearable />
          </el-form-item>
          <el-form-item label="备注信息" prop="remark">
            <el-input v-model="activePostForm.remark" style="width: 100%;" size="mini" placeholder="请输入备注信息" clearable />
          </el-form-item>
          <el-form-item label="模板状态" prop="status">
            <el-select v-model="activePostForm.status" style="width: 100%;" size="mini" placeholder="请选择模板状态" filterable :disabled="activePostForm.type === 'CUSTOMER'">
              <el-option v-for="i in templateStatusData" :key="i.value" :value="i.value" :label="i.label" />
            </el-select>
          </el-form-item>
          <el-form-item label="模板类型" prop="type">
            <el-select v-model="activePostForm.type" style="width: 100%;" size="mini" placeholder="请选择模板类型" filterable disabled>
              <el-option v-for="i in templateTypeData" :key="i.value" :value="i.value" :label="i.label" />
            </el-select>
          </el-form-item>
        </el-form>
      </template>
    </commonDrawer>
  </el-row>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import commonDrawer from '@/common/views/drawer/index.vue'
@Component({
  name: 'customerTemplateSettingCUDrawer',
  components: {
    commonDrawer
  }
})
export default class CustomerTemplateSetting extends Vue {
  // #region 基础数据
  @Prop(Object) public postForm!: {}
  @Prop({ default: 'add' }) private type!: string
  private drawer: boolean = false
  private get activePostForm () {
    return this.postForm
  }

  private rules: object = {
    name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
    status: [{ required: true, message: '请选择模板状态', trigger: 'change' }],
    type: [{ required: true, message: '请选择模板类型', trigger: 'change' }]
  }

  private templateStatusData = [ // 模板状态
    { value: 'enable', label: '启用' },
    { value: 'disable', label: '停用' }
  ]

  get templateTypeData () {
    switch (this.type) {
      case 'add':
        return [
          { value: 'TICKET', label: '工单模板' }
          // { value: 'OUTBOUND', label: '外呼任务模板' }
        ]
      case 'edit':
        return [
          { value: 'CUSTOMER', label: '客户模板' },
          { value: 'TICKET', label: '工单模板' }
          // { value: 'OUTBOUND', label: '外呼任务模板' }
        ]
    }
  }
  // #endregion

  // #region 页面全局函数
  private openOrCloseDraw () {
    this.drawer = !this.drawer
  }

  // 取消按钮
  private handleCancel () {
    this.drawer = false
  }

  // 保存按钮
  private handleConfirm () {
    (this as any).$refs.activePostForm.validate((valid) => {
      if (valid) {
        switch (this.type) {
          case 'add':
            this.$emit('handleConfirmAdd', this.activePostForm)
            break
          case 'edit':
            this.$emit('handleConfirmEdit', this.activePostForm)
            break
        }
      } else {
        console.log('error submit!!!')
        return false
      }
    })
  }
  // #endregion
}
</script>
